<template>
  <div>
    <!-- 自定义组件的双向绑定 :value @input :type都是input自带的属性 -->
    <!-- 使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用-->
    <input :type="type" :value="value" @input="onInput" v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  // 设置为false避免设置到根元素上
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: "text",
    },
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      //派发一个input事件
      this.$emit("input", e.target.value);
      //通知父组件执行校验
      this.$parent.$emit("validate");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>